<!DOCTYPE html>
<html lang="en">

	<head>
		<!-- Required meta tags-->
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Title Page-->
		<title>网页设计与制作仿真效果操作网站-盒子模型</title>
		<!-- Fontfaces CSS-->
		<link href="../css/font-face.css" rel="stylesheet" media="all">
		<link href="../vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
		<link href="../vendor/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
		<link href="../vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
		<!-- Bootstrap CSS-->
		<link href="../vendor/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">

		<!-- Vendor CSS-->
		<!-- <link href="../vendor/animsition/animsition.min.css" rel="stylesheet" media="all"> -->
		<link href="../vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
		<link href="../vendor/wow/animate.css" rel="stylesheet" media="all">
		<link href="../vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
		<link href="../vendor/slick/slick.css" rel="stylesheet" media="all">
		<link href="../vendor/select2/select2.min.css" rel="stylesheet" media="all">
		<link href="../vendor/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">
		<!-- Main CSS-->
		<link href="../css/theme.css" rel="stylesheet" media="all">
		<link rel="stylesheet" type="text/css" href="../css/boc_con.css" />
		<link rel="stylesheet" type="text/css" href="../css/animte.css" />
	</head>
	<body class="animsition">
		<div class="page-wrapper">
			<!-- MENU SIDEBAR-->
			<aside class="menu-sidebar d-none d-lg-block">
				<div class="logo">
					<a href="#">

						<span><img src="../images/icon/logo.png" alt="Cool Admin" style="" />智慧教学平台</span>
						<span> Quxue Intelligent Teaching Platform</span>
					</a>
				</div>
				<div class="menu-sidebar__content js-scrollbar1">
					<nav class="navbar-sidebar">
						<ul class="list-unstyled navbar__list">
							<li class="active has-sub">
								<a class="js-arrow" href="index.html">
									<i class="fas fa-tachometer-alt"></i>我的信息</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="askqustion.html">我的问题</a>
									</li>
									<li>
										<a href="index.html">我的数据</a>
									</li>
							
								</ul>
							</li>
							<li class="active has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-tachometer-alt"></i>项目1html标签</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="htmlControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="htmltest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>

								</ul>
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-tachometer-alt"></i>项目2CSS样式</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="CSSControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="CSStest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>

								</ul>
							</li>

							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-desktop"></i>项目3盒子模型</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="boxControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="boxtest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>

								</ul>
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-align-justify"></i>项目4弹性布局</a>

								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="flexControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="transformtest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>

								</ul>

							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-square"></i>项目5背景与外观</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="backgroundControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="backgtest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>

								</ul>
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-pie-chart"></i>项目6精灵图设置</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="spriteControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="spritetest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>

								</ul>
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-spinner fa-pulse"></i>项目7动画技术</a>

								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="animateControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="animatetest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>

								</ul>

							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-adjust"></i>项目8变形与过渡</a>
								 

								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="transformControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="transformtest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>

								</ul>

							</li>
						</ul>
					</nav>
				</div>
			</aside>
			<!-- END MENU SIDEBAR-->

			<!-- PAGE CONTAINER-->
			<div class="page-container">
				<header class="header-desktop">
					<div class="section__content section__content--p30">
						<div class="container-fluid">
							<div class="header-wrap">
								<form class="form-header" action="" method="POST">
									<input class="au-input au-input--xl" type="text" name="search"
										placeholder="Search for datas &amp; reports..." />
									<button class="au-btn--submit" type="submit">
										<i class="zmdi zmdi-search"></i>
									</button>
								</form>
								<div class="header-button">
									<div class="noti-wrap">
										<div class="noti__item js-item-menu">
											<i class="zmdi zmdi-comment-more"></i>
											<span class="quantity">1</span>
										</div>
										<div class="noti__item js-item-menu">
											<i class="zmdi zmdi-email"></i>
											<span class="quantity">1</span>
										</div>
										<div class="noti__item js-item-menu">
											<i class="zmdi zmdi-notifications"></i>
											<span class="quantity">3</span>
										</div>
									</div>
									<div class="account-wrap">
										<div class="account-item clearfix js-item-menu">
											<div class="image">
												<img src="../images/icon/avatar-01.jpg" alt="***" />
											</div>
											<div class="content">
												<a class="js-acc-btn" href="#">***</a>
											</div>
											<div class="account-dropdown js-dropdown">
												<div class="info clearfix">
													<div class="image">
														<a href="#">
															<img src="../images/icon/avatar-01.jpg" alt="***" />
														</a>
													</div>
													<div class="content">
														<h5 class="name">
															<a href="#">***</a>
														</h5>
														<span class="email">johndoe@example.com</span>
													</div>
												</div>
												<div class="account-dropdown__body">
													<div class="account-dropdown__item">
														<a href="#">
															<i class="zmdi zmdi-account"></i>Account</a>
													</div>
													<div class="account-dropdown__item">
														<a href="#">
															<i class="zmdi zmdi-settings"></i>Setting</a>
													</div>
													<div class="account-dropdown__item">
														<a href="#">
															<i class="zmdi zmdi-money-box"></i>Billing</a>
													</div>
												</div>
												<div class="account-dropdown__footer">
													<a href="#">
														<i class="zmdi zmdi-power"></i>Logout</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</header>
				<!-- HEADER DESKTOP-->

				<!-- MAIN CONTENT-->
				<div class="main-content" s>
					<!-- HEADER DESKTOP-->
					<header class="header-desktop" style="">
						<div class="section__content section__content--p30">
							<div class="container-fluid">
								<div class="header-wrap">
									<form class="form-header" action="" method="POST">
										<input class="au-input au-input--xl" type="text" name="search"
											placeholder="Search for datas &amp; reports..." />
										<button class="au-btn--submit" type="submit">
											<i class="zmdi zmdi-search"></i>
										</button>
									</form>
									<div class="header-button">
										<div class="noti-wrap">
											<div class="noti__item js-item-menu">
												<i class="zmdi zmdi-comment-more"></i>
												<span class="quantity">1</span>
												<div class="mess-dropdown js-dropdown">
													<div class="mess__title">
														<p>You have 2 news message</p>
													</div>
													<div class="mess__item">
														<div class="image img-cir img-40">
															<img src="../images/icon/avatar-06.jpg"
																alt="Michelle Moreno" />
														</div>
														<div class="content">
															<h6>Michelle Moreno</h6>
															<p>Have sent a photo</p>
															<span class="time">3 min ago</span>
														</div>
													</div>
													<div class="mess__item">
														<div class="image img-cir img-40">
															<img src="../images/icon/avatar-04.jpg" alt="Diane Myers" />
														</div>
														<div class="content">
															<h6>Diane Myers</h6>
															<p>You are now connected on message</p>
															<span class="time">Yesterday</span>
														</div>
													</div>
													<div class="mess__footer">
														<a href="#">View all messages</a>
													</div>
												</div>
											</div>
											<div class="noti__item js-item-menu">
												<i class="zmdi zmdi-email"></i>
												<span class="quantity">1</span>
												<div class="email-dropdown js-dropdown">
													<div class="email__title">
														<p>You have 3 New Emails</p>
													</div>
													<div class="email__item">
														<div class="image img-cir img-40">
															<img src="../images/icon/avatar-06.jpg"
																alt="Cynthia Harvey" />
														</div>
														<div class="content">
															<p>Meeting about new dashboard...</p>
															<span>Cynthia Harvey, 3 min ago</span>
														</div>
													</div>
													<div class="email__item">
														<div class="image img-cir img-40">
															<img src="../images/icon/avatar-05.jpg"
																alt="Cynthia Harvey" />
														</div>
														<div class="content">
															<p>Meeting about new dashboard...</p>
															<span>Cynthia Harvey, Yesterday</span>
														</div>
													</div>
													<div class="email__item">
														<div class="image img-cir img-40">
															<img src="../images/icon/avatar-04.jpg"
																alt="Cynthia Harvey" />
														</div>
														<div class="content">
															<p>Meeting about new dashboard...</p>
															<span>Cynthia Harvey, April 12,,2018</span>
														</div>
													</div>
													<div class="email__footer">
														<a href="#">See all emails</a>
													</div>
												</div>
											</div>
											<div class="noti__item js-item-menu">
												<i class="zmdi zmdi-notifications"></i>
												<span class="quantity">3</span>
												<div class="notifi-dropdown js-dropdown">
													<div class="notifi__title">
														<p>You have 3 Notifications</p>
													</div>
													<div class="notifi__item">
														<div class="bg-c1 img-cir img-40">
															<i class="zmdi zmdi-email-open"></i>
														</div>
														<div class="content">
															<p>You got a email notification</p>
															<span class="date">April 12, 2018 06:50</span>
														</div>
													</div>
													<div class="notifi__item">
														<div class="bg-c2 img-cir img-40">
															<i class="zmdi zmdi-account-box"></i>
														</div>
														<div class="content">
															<p>Your account has been blocked</p>
															<span class="date">April 12, 2018 06:50</span>
														</div>
													</div>
													<div class="notifi__item">
														<div class="bg-c3 img-cir img-40">
															<i class="zmdi zmdi-file-text"></i>
														</div>
														<div class="content">
															<p>You got a new file</p>
															<span class="date">April 12, 2018 06:50</span>
														</div>
													</div>
													<div class="notifi__footer">
														<a href="#">All notifications</a>
													</div>
												</div>
											</div>
										</div>
										<div class="account-wrap">
											<div class="account-item clearfix js-item-menu">
												<div class="image">
													<img src="../images/icon/avatar-01.jpg" alt="***" />
												</div>
												<div class="content">
													<a class="js-acc-btn" href="#">***</a>
												</div>
												<div class="account-dropdown js-dropdown">
													<div class="info clearfix">
														<div class="image">
															<a href="#">
																<img src="../images/icon/avatar-01.jpg" alt="***" />
															</a>
														</div>
														<div class="content">
															<h5 class="name">
																<a href="#">***</a>
															</h5>
															<span class="email">johndoe@example.com</span>
														</div>
													</div>
													<div class="account-dropdown__body">
														<div class="account-dropdown__item">
															<a href="#">
																<i class="zmdi zmdi-account"></i>Account</a>
														</div>
														<div class="account-dropdown__item">
															<a href="#">
																<i class="zmdi zmdi-settings"></i>Setting</a>
														</div>
														<div class="account-dropdown__item">
															<a href="#">
																<i class="zmdi zmdi-money-box"></i>Billing</a>
														</div>
													</div>
													<div class="account-dropdown__footer">
														<a href="#">
															<i class="zmdi zmdi-power"></i>Logout</a>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</header>
					<!-- HEADER DESKTOP-->

					<!-- MAIN CONTENT-->
					<div class="main-content">
						<section>
							<div class="section__content section__content--p30">
								<div class="container-fluid">
									<div class="row">
										<div class="col-xl-8">
											<!-- RECENT REPORT 2-->
											<div class="au-card recent-report" style="padding-bottom: 0px;">
												<div class="au-card-inner" style="  padding: 0px;margin-bottom: 0px;">
													<h3 class="title-2">吴灿学习状态词云图</h3>


													<div class="chart-info">

														<div id="mywordcloud"
															style="height:560px;   width: 100%;     padding: 0px;">

														</div>
													</div>

												</div>
											</div>
											<!-- END RECENT REPORT 2             -->
										</div>
										<div class="col-xl-4">
											<!-- TASK PROGRESS-->

											<div class="au-card chart-percent-card">
												<div class="au-card-inner">
													<h3 class="title-2">学习目标达成度对比</h3>
													<div class="row no-gutters"
														style="height:510px;   width: 100%;  padding-top: 20px;   ">
														<canvas id="radarChart"></canvas>

													</div>
												</div>
											</div>
											<!-- END TASK PROGRESS-->
										</div>
									</div>
								</div>
							</div>
						</section>

						<div class="row">
							<div class="col-lg-12">
								<div class="au-card au-card--no-shadow au-card--no-pad m-b-40">
									<div class="au-card-title" style="background-image:url('images/bg-title-01.jpg');">
										<div class="bg-overlay bg-overlay--blue"></div>
										<h3>
											<i class="zmdi zmdi-account-calendar"></i>推荐学习资料和步骤
										</h3>
										<button class="au-btn-plus">
											<i class="zmdi zmdi-plus"></i>
										</button>
									</div>
									<div class="au-task js-list-load">

										<div class="au-task-list js-scrollbar3">
											<!-- <div class="au-task__item au-task__item--danger">
					                    <div class="au-task__item-inner">
					                        <h5 class="task">
					                            <a href="#">浙江省高等学校在线开放课程共享平台《网页设计与制作》-css样式-3.5.2 CSS属性选择器</a>
					                        </h5>
					                        <span class="time">10:00 AM</span>
					                    </div> 
					                </div>-->
											<div class="au-task__item au-task__item--warning">
												<div class="au-task__item-inner">
													<h5 class="task">
														<a href="#"><span
																style="color: #0000FF; font-weight: bold;">浙江省高等学校在线开放课程共享平台</span>
															《网页设计与制作》- 项目2-2.1.2CSS筛选选择器</a>
													</h5>
													<!-- <span class="time">11:00 AM</span> -->
												</div>
											</div>
											<div class="au-task__item au-task__item--primary">
												<div class="au-task__item-inner">
													<h5 class="task">
														<a href="#"><span
																style="color: #0000FF; font-weight: bold;">浙江省高等学校在线开放课程共享平台</span>
															《网页设计与制作》- 项目2-2.2.3盒子类型</a>
													</h5>
													<!-- <span class="time">02:00 PM</span> -->
												</div>
											</div>
											<div class="au-task__item au-task__item--success">
												<div class="au-task__item-inner">
													<h5 class="task">
														<a href="#"><span
																style="color: #0000FF; font-weight: bold;">浙江省高等学校在线开放课程共享平台</span>
															《网页设计与制作》 -项目2-2.3.1css3高级选择器</a>
													</h5>
													<!-- <span class="time">03:30 PM</span> -->
												</div>
											</div>
											<div class="au-task__item au-task__item--danger">
												<div class="au-task__item-inner">
													<h5 class="task">
														<a href="#"><span
																style="color: #00AD5F; font-weight: bold;">趣学智慧教学平台闯关小游戏</span>
															关键字游戏：http://www.quxue.com/game/cssbasicselector.html</a>
													</h5>
													<!-- <span class="time">10:00 AM</span> -->
												</div>
											</div>
											<div class="au-task__item au-task__item--warning">
												<div class="au-task__item-inner">
													<h5 class="task">
														<a href="#"><span
																style="color: #00AD5F; font-weight: bold;">趣学智慧教学平台闯关小游戏</span>
															面板属性游戏：http://www.quxue.com/game/cssmoreselector.html</a>
													</h5>
													<!-- <span class="time">11:00 AM</span> -->
												</div>
											</div>

											<div class="au-task__item au-task__item--warning">
												<div class="au-task__item-inner">
													<h5 class="task">
														<a href="#"><span
																style="color: sandybrown; font-weight: bold;">趣学智慧教学平台综合测试</span>触点事件:http://www.quxue.com/test/cssmoreselector.html</a>
													</h5>
												</div>
											</div>
											<div class="au-task__item au-task__item--danger">
												<div class="au-task__item-inner">
													<h5 class="task">
														<a href="#"><span
																style="color: sandybrown; font-weight: bold;">趣学智慧教学平台综合测试</span>本地存储测试：http://www.quxue.com/test/cssselectortest.html</a>
													</h5>
												</div>
											</div>
										</div>
										<div class="au-task__footer">
											<button class="au-btn au-btn-load js-load-btn"> more</button>
										</div>
									</div>
								</div>
							</div>

						</div>


					</div>
				</div>

			</div>

		</div>


		<!-- Jquery JS-->
		<script src="../vendor/jquery-3.2.1.min.js"></script>
		<!-- Bootstrap JS-->
		<script src="../vendor/bootstrap-4.1/popper.min.js"></script>
		<script src="../vendor/bootstrap-4.1/bootstrap.min.js"></script>
		<!-- Vendor JS       -->
		<script src="../vendor/slick/slick.min.js">
		</script>
		<script src="../vendor/wow/wow.min.js"></script>
		<!-- <script src="../vendor/animsition/animsition.min.js"></script> -->
		<script src="../vendor/bootstrap-progressbar/bootstrap-progressbar.min.js">
		</script>
		<script src="../vendor/counter-up/jquery.waypoints.min.js"></script>
		<script src="../vendor/counter-up/jquery.counterup.min.js">
		</script>
		<script src="../vendor/circle-progress/circle-progress.min.js"></script>
		<script src="../vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
		<script src="../vendor/chartjs/Chart.bundle.min.js"></script>
		<script src="../vendor/select2/select2.min.js"></script>
		<script type="text/javascript" src="../js/js2wordcloud.js"></script>
		<!-- Main JS-->
		<script type="text/javascript" src="../js/mywordcloud2.js"></script>
		<script src="../js/main.js"></script>
		<script src="../js/jquery.bigcolorpicker.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/animate.js"></script>
	</body>

</html>
<!-- end document-->
